<template>
  <div class="map-panel">
    <img src="https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=600" class="map-img" />
    <div class="map-marker" style="top:45%;left:40%"></div>
    <div class="map-marker" style="top:55%;left:55%"></div>
  </div>
</template>

<script>
export default {
  name: 'MapPanel'
}
</script>

<style scoped>
.map-panel {
  flex: 1;
  position: relative;
  min-width: 800px;
  background: #222;
}
.map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-marker {
  position: absolute;
  width: 40px;
  height: 40px;
  background: url('https://img.icons8.com/fluency/48/marker.png') no-repeat center/contain;
}
</style>
